 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义下划线</title>
</head>
<style>	
	body {
		margin: 0;
		padding: 0;
		font: 250%/1.6 Baskerville, Palatino, serif;
	}
	a {
		color: #666;
		text-decoration: none;
	}
	.underlinep1 {
		width: 750px;
	}
	.underline1 {
		border-bottom: 1px solid gray;
	}
	.underline2 {
		box-shadow: 0 -1px gray inset;
	}
	.underline3 {
		background: linear-gradient(gray, gray) no-repeat;
		background-size: 100% 1px;
		background-position: 0 45px;
		text-shadow: .05em 0 white, -.05em 0 white;
	}
	.underline4 {
		background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
		background-size: .2em 2px;
		background-position: 0 45px;
	}
</style>
<body>
	<!-- 方案一 -->
	<p>This expression tell us: <a class="underline1" href="javascript:;">attitude decides temptation everything! -yield</a></p> 
	<p class="underlinep1">This expression tell us: <a class="underline1" href="javascript:;">attitude decides tempt&shy;ation everything! -yield</a></p> 
	<!-- 方案二 -->
	<p class="underlinep2">This expression tell us: <a class="underline2" href="javascript:;">attitude decides temptation everything! -yield</a></p> 
	<!-- 方案三 -->
	<p class="underlinep3">This expression tell us: <a class="underline3" href="javascript:;">attitude decides temptation everything! -yield</a></p> 
	<!-- 方案四 -->
	<p class="underlinep4">This expression tell us: <a class="underline4" href="javascript:;">attitude decides temptation everything! -yield</a></p> 
</body>
</html>